<template>
  <text>{{dateShow}}</text>
</template>

<script>
/**
   * Dateformat 日期格式化
   * @description 日期格式化组件
   * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
   * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
   * @property {String} locale 格式化使用的语言
   *   @value zh 中文
   *   @value en 英文
   * @property {Array} threshold 应用不同类型格式化的阈值
   * @property {String} format 输出日期字符串时的格式
   */
import {
  friendlyDate
} from './date-format.js'
export default {
  name: 'uniDateformat',
  props: {
    date: {
      type: [Object, String, Number],
      default () {
        return Date.now()
      }
    },
    locale: {
      type: String,
      default: 'zh'
    },
    threshold: {
      type: Array,
      default () {
        return [0, 0]
      }
    },
    format: {
      type: String,
      default: 'yyyy/MM/dd hh:mm:ss'
    },
    // refreshRate使用不当可能导致性能问题，谨慎使用
    refreshRate: {
      type: [Number, String],
      default: 0
    }
  },
  data () {
    return {
      refreshMark: 0
    }
  },
  computed: {
    dateShow () {
      this.refreshMark
      return friendlyDate(this.date, {
        locale: this.locale,
        threshold: this.threshold,
        format: this.format
      })
    }
  },
  watch: {
    refreshRate: {
      handler () {
        this.setAutoRefresh()
      },
      immediate: true
    }
  },
  methods: {
    refresh () {
      this.refreshMark++
    },
    setAutoRefresh () {
      clearInterval(this.refreshInterval)
      if (this.refreshRate) {
        this.refreshInterval = setInterval(() => {
          this.refresh()
        }, parseInt(this.refreshRate))
      }
    }
  }
}
</script>

<style>

</style>
